{% extends 'index.html' %}
{% load static %}

{% block title %}文章分类{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/category.css' %}">
{% endblock %}

{% block content %}
<div class="row" style="padding: 0 10px;">
    <div class="category-box">
        <div class="me-head me-flex-b">
            <span>分类</span>
            <div class="art-count">
                共<span> 10 </span>个分类
            </div>
        </div>
        <div class="category-list">
            {% if cate_list %}
            {% for item in cate_list %}
            <div class="category-item">
                <button type="button" class="btn btn-primary btn-xs">{{ item.cate_name }} -- {{ item.articles.count }}</button>
            </div>
            {% endfor %}
            {% else %}
            <div class="empty">
                <img src="{% static 'img/empty1.png' %}" alt="" width="48">
                <span>这里空空如也</span>
            </div>
            {% endif %}
        </div>
    </div>
</div>
<div class="row" style="padding: 0 10px;">
    <div class="lists">
        {% if article_list %}
            {% for item in article_list %}
            <div class="item">
                <div class="row me-row">
                    <div class="col-md-7 me-col">
                        <div class="item-title">
                            <h4><a href="{% url 'web:article_detail' aid=item.id %}">{{ item.title }}</a></h4>
                        </div>
                        <div class="item-desc">
                            <p>{{ item.desc }}</p>
                        </div>
                        <div class="item-info me-flex-b">
                            <div class="item-info-l">
                                <ul class="me-flex-l">
                                    <li class="me-flex-b">
                                        <img src="{{ item.author.avatar.url }}" alt="" height="20" width="20"/>
                                        <span>{{ item.author.author_name }}</span>
                                    </li>
                                    <li>
                                        <span><i class="fa fa-calendar"></i> {{ item.create_time }}</span>
                                    </li>
                                    <li>
                                        <span title="这么多人在这里一看究竟了ღゝ◡╹)ノ♡"  class="me-hover"><i class="fa fa-eye"></i> {{ item.view_count }}</span>
                                    </li>
                                    <li>
                                        <span title="很高兴能它对你有所帮助ღゝ◡╹)ノ♡" class="me-hover"><i
                                                class="fa fa-thumbs-up"></i> {{ item.up }}</span>
                                    </li>
                                    <li>
                                        <span title="好吧,我会继续努力的ღゝ◡╹)ノ♡" class="me-hover"><i
                                                class="fa fa-thumbs-down"></i> {{ item.down }}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="item-info-r">
                                <button type="button" class="btn btn-xs btn-success" style="margin-bottom: 10px;">{{ item.category }}
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <img src="{{ item.img_url.url }}" alt="" style="width: 100%;">
                    </div>
                </div>
            </div>
            {% endfor %}
            <div class="pagination" style="text-align: center;width:100%;">
                <div id="pagination" class="page" {% if is_show_paginator %}style="display: none;"{% endif %}></div>
            </div>
        {% else %}
            <div class="empty" style="padding: 50px ">
                <img src="{% static 'img/empty2.png' %}" alt="" width="48">
                <span>这里空空如也</span>
            </div>
        {% endif %}
    </div>

</div>
{% endblock %}

{% block js %}
<script>
    $(function () {
        // var pageNum = {{ page_num }}
        // var pageSize = {{ page_size }}
        // var totalPage = {{ total_page }}
        paginator();
    });

    function paginator() {
        $('#pagination').pagination({
            currentPage: 1,
            totalPage: 10,
            callback:function (current) {
                // location.href = '/?page_size=' + pageSize + '&page_num='+current;
            }
        });
    }
</script>
{% endblock %}

